import React, { Component, cloneElement } from 'react'
import { render } from 'react-dom'
import {
  Route,
  IndexRoute,
  Router,
  hashHistory,
} from 'react-router'
import {
  Homepage,
} from 'component/container'
import {
  Misrouting,
  Playground,
  ForkGithub,
} from 'component/public'
// nowing
import {
  SplashPage,
  RegisterPage,
  AgreementPage,
  ForgetPassword,
  NoticePage,
  NoticeDetailPage,
  CentralDiscPage,
  MakePosition,
  FinancePage,
  MicroDisc,
  AccountPage,
  RankingList,
  NewsDetail,
  HelpPage,
  PositionPage,
  Profile,
  RechargePage,
  RechargeSuccess,
  RechargeFail,
  BankcardListPage,
  GiftCoupon,
  ExperienceTicket,
  LongPressPlayground,
  CentificationPage,
  CentificationInfo,
  TradeV2,
  HomepageV2,
  HistoricalTransaction,
  ResetPassword,
} from 'component/ui'
import {
  TraditionalPage,
  TradeV3,
} from 'component/traditional'
import {
  LayoutContainer,
  TopMiddleBottom,
  TopRest,
  RestBottom,
} from 'component/layout'
import { WebIntroPage, HeaderPage } from 'component/web-ui'
import 'static/less/app'

const GiftCouponPage = (nextState, cb) => {
  require.ensure([], require => {
    cb(null, require('component/ui/GiftCouponPage').default)
  }, 'gcp')
}

const FlexCenter = (nextState, cb) => {
  require.ensure([], require => {
    cb(null, require('component/public/FlexCenter').default)
  }, 'fl')
}

class App extends Component {
  componentDidMount() {
    const { location } = this.props
    if (location.pathname === '/blue-ui/splash') return
    if (document.getElementById('splash')) {
      document.body.removeChild(document.getElementById('splash'))
    }
  }
  render() {
    const { children } = this.props
    return (
      <div className={`rt-app-container`}>{cloneElement(children)}</div>
    )
  }
}

const routes = (
  <Route path="/" component={App}>
    <IndexRoute component={Homepage} />
    <Route
      path="/trade"
      getComponent={(nextState, cb) => {
        require.ensure([], require => {
          cb(null, require('component/trade/TradePage').default)
        }, 'tp')
      }}
    />
    <Route
      path="/account"
      getComponent={(nextState, callback) => {
        require.ensure([], require => {
          callback(null, require('component/account/AccountPage').default)
        }, 'ap')
      }}
    />
    <Route path="/flex-center" getComponent={FlexCenter} />
    <Route
      path="/3party-register-error"
      getComponent={(nextState, callback) => {
        require.ensure([], require => {
          callback(null, require('component/public/ThirdPartyRegisterError').default)
        }, 'tpre')
      }}
    />
    <Route path="/ui/gift" getComponent={GiftCouponPage} />

    <Route path="/blue-ui">
      <Route path="splash" component={SplashPage} />
      <Route path="register" component={RegisterPage} />
      <Route path="agreement" component={AgreementPage} />
      <Route path="forget-password" component={ForgetPassword} />
      <Route path="notice" component={NoticePage} />
      <Route path="notice/:id" component={NoticeDetailPage} />
      <Route path="central-disc" component={CentralDiscPage} />
      <Route path="make-position" component={MakePosition} />
      <Route path="finance" component={FinancePage} />
      <Route path="news/:id" component={NewsDetail} />
      <Route path="ranking-list" component={RankingList} />
      <Route path="account" component={AccountPage} />
      <Route path="micro-disc" component={MicroDisc} />
      <Route path="help" component={HelpPage} />
      <Route path="positions" component={PositionPage} />
      <Route path="profile" component={Profile} />
      <Route path="recharge" component={RechargePage} />
      <Route path="recharge-success" component={RechargeSuccess} />
      <Route path="recharge-fail" component={RechargeFail} />
      <Route path="bank-cards" component={BankcardListPage} />
      <Route path="gift-coupon" component={GiftCoupon} />
      <Route path="experience-ticket" component={ExperienceTicket} />
      <Route path="long-press" component={LongPressPlayground} />
      <Route path="centification" component={CentificationPage} />
      <Route path="centification-info" component={CentificationInfo} />
      <Route path="trade-v2" component={TradeV2} />
      <Route path="homepage-v2" component={HomepageV2} />
      <Route path="historical-transaction" component={HistoricalTransaction} />
      <Route path="reset-password" component={ResetPassword} />
    </Route>

    <Route path="/web-ui">
      <IndexRoute component={WebIntroPage} />
      <Route path="12.12" component={HeaderPage} />
    </Route>

    <Route path="/layout">
      <IndexRoute component={LayoutContainer} />
      <Route path="top-middle-bottom" component={TopMiddleBottom} />
      <Route path="homepage" component={TopRest} />
      <Route path="rest-bottom" component={RestBottom} />
    </Route>

    <Route path="/traditional">
      <IndexRoute component={TraditionalPage} />
      <Route path="trade" component={TradeV3} />
    </Route>

    <Route path="/playground" component={Playground} />
    <Route path="/fork-me-on-github" component={ForkGithub} />

    <Route path="*" component={Misrouting} />
  </Route>
)

render(
  <Router history={hashHistory} routes={routes} />,
  document.getElementById('app')
)